* {
    margin: 0;
}

.con-bar {
    position       : fixed;
    top            : 0;
    left           : 0;
    width          : 100vw;
    height         : 50px;
    display        : flex;
    justify-content: flex-end;
    align-items    : center;

    >* {
        margin-right: 10px;
    }
}

.chat-container {
    box-sizing : border-box;
    height     : 100vh;
    width      : 100vw;
    padding-top: 50px;

    .chat-box {
        box-sizing    : border-box;
        height        : 100%;
        border        : 10px outset;
        display       : flex;
        flex-direction: column;

        .chat-list {
            padding   : 32px;
            box-sizing: border-box;
            flex      : 1;


            .row {
                overflow     : hidden;
                margin-bottom: 20px;
            }

            .left {
                margin-top: 4px;
                float     : left;
                max-width : 30vw;

                &>.chat-item {
                    border-radius   : 12px;
                    background-color: #a1a1a1;
                    padding         : 12px;
                }
            }

            .right {
                margin-top: 4px;
                float     : right;
                max-width : 30vw;
                text-align: end;

                &>.chat-item {
                    border-radius   : 12px;
                    background-color: rgb(95, 197, 81);
                    padding         : 12px;
                }
            }
        }

        .chat-input {
            height : 50px;
            display: flex;

            input {
                flex: 1;
            }

            button {
                width: 50px;
            }
        }
    }

    .name-input {
        user-select: none;
        display    : flex;
        height     : 50px;
        line-height: 50px;
        position   : fixed;
        top        : 0;
        left       : 20px;

        button {
            margin-left: 10px;
        }
    }
}